<template>
  <div>
    <div class="header">
      <van-icon class="back" @click="goback" size="18px" name="arrow-left" />
      <div class="title">房贷计算</div>
      <div style="width: 28px">&emsp;</div>
    </div>
    <div class="space"></div>
    <div class="depart">
      <div class="">计算方式</div>
      <div class="box">
        <div :class="[loan ? 'active' : '']" @click="loan = true">贷款总额</div>
        <div :class="[!loan ? 'active' : '']" @click="loan = false">
          房屋总价
        </div>
      </div>
    </div>
    <div v-show="loan" class="">
      <div class="showtitle">
        <van-tabs
          v-model="active1"
          background="#45b7cb"
          title-active-color="#45b7cb"
          title-inactive-color="#fff"
          color="#fff"
          type="card"
        >
          <van-tab title="商业贷款">
            <div class="showus">
              <div class="cell">
                <div class="topbox">
                  <div class="">商贷金额</div>
                  <input
                    v-model="businessmoney"
                    type="number"
                    placeholder="请输入"
                  />
                  <div style="flex: 1"></div>
                  <div class="">万</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">商贷年限</div>
                  <div @click="showbusinessyears = true">
                    {{ businessyears }}
                  </div>
                  <div style="flex: 1"></div>
                  <div class="">年</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">利率方式</div>
                  <div @click="showlpr = true" class="">{{ LPRval }}</div>
                  <div style="flex: 1"></div>
                  <div class="">
                    <van-icon name="arrow" />
                  </div>
                </div>
                <div class="bottombox">
                  （LPR:贷款市场报价利率,自2019年10月起商贷开始使用LPR计算。LPR基准利率每月调整一次，实际贷款利率再PR基础上浮动）
                </div>
              </div>
              <div v-show="LPRval == '按LPR'" class="cell">
                <div class="topbox">
                  <div class="">基点&nbsp;&nbsp;</div>
                  <input type="number" v-model="basic" />
                  <div style="flex: 1"></div>
                  <div class="">BP(%..)</div>
                </div>
                <div class="bottombox">
                  (1个基点=0.01%,上浮10个基点=LPR*(1+0.1%))
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">综合商贷利率</div>
                  <div v-show="LPRval == '按LPR'" class="">
                    LPR(4.65%)+BP(0%..)=
                  </div>
                  <div style="flex: 1"></div>
                  <div class="">{{ businessrate }}%</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="组合贷款">
            <div class="showus">
              <div class="cell">
                <div class="topbox">
                  <div class="">公积金金额</div>
                  <input
                    v-model="publicmoney"
                    type="number"
                    placeholder="请输入"
                  />
                  <div style="flex: 1"></div>
                  <div class="">万</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">公积金年限</div>
                  <div @click="showpublicyears = true">{{ publicyears }}</div>
                  <div style="flex: 1"></div>
                  <div class="">年</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">公积金利率</div>
                  <div @click="showpublic = true" class="">
                    {{ Publicval }}
                  </div>
                  <div style="flex: 1"></div>
                  <div class=""><van-icon name="arrow" /></div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">商贷金额</div>
                  <input
                    v-model="businessmoney"
                    type="number"
                    placeholder="请输入"
                  />
                  <div style="flex: 1"></div>
                  <div class="">万</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">商贷年限</div>
                  <div @click="showbusinessyears = true">
                    {{ businessyears }}
                  </div>
                  <div style="flex: 1"></div>
                  <div class="">年</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">利率方式</div>
                  <div @click="showlpr = true" class="">{{ LPRval }}</div>
                  <div style="flex: 1"></div>
                  <div class="">
                    <van-icon name="arrow" />
                  </div>
                </div>
                <div class="bottombox">
                  （LPR:贷款市场报价利率,自2019年10月起商贷开始使用LPR计算。LPR基准利率每月调整一次，实际贷款利率再PR基础上浮动）
                </div>
              </div>
              <div v-show="LPRval == '按LPR'" class="cell">
                <div class="topbox">
                  <div class="">基点</div>
                  <input type="number" v-model="basic" />
                  <div style="flex: 1"></div>
                  <div class="">BP(%..)</div>
                </div>
                <div class="bottombox">
                  (1个基点=0.01%,上浮10个基点=LPR*(1+0.1%))
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">综合商贷利率</div>
                  <div v-show="LPRval == '按LPR'" class="" >
                    LPR(4.65%)+BP(0%..)=
                  </div>
                  <div style="flex: 1"></div>
                  <div class="">{{ businessrate }}%</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="公积金贷款">
            <div class="showus">
              <div class="cell">
                <div class="topbox">
                  <div class="">公积金金额</div>
                  <input
                    v-model="publicmoney"
                    type="number"
                    placeholder="请输入"
                  />
                  <div style="flex: 1"></div>
                  <div class="">万</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">公积金年限</div>
                  <div @click="showpublicyears = true">{{ publicyears }}</div>
                  <div style="flex: 1"></div>
                  <div class="">年</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">公积金利率</div>
                  <div @click="showpublic = true" class="">
                    {{ Publicval }}
                  </div>
                  <div style="flex: 1"></div>
                  <div class=""><van-icon name="arrow" /></div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div v-show="!loan" class="">
      <div class="showtitle">
        <van-tabs
          v-model="active2"
          background="#45b7cb"
          title-active-color="#45b7cb"
          title-inactive-color="#fff"
          color="#fff"
          type="card"
        >
          <van-tab title="商业贷款">
            <div class="showus">
              <div class="cell">
                <div class="topbox">
                  <div class="">房屋总价</div>
                  <input
                    type="number"
                    v-model="housemoney"
                    placeholder="请输入"
                  />
                  <div style="flex: 1"></div>
                  <div class="">万</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">首付比例</div>
                  <input
                    type="number"
                    v-model="firstpayproportion"
                    placeholder="请输入"
                  />
                  <div style="flex: 1"></div>
                  <div class="">%</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">商贷金额</div>
                  <div>{{ businessmoney }}</div>
                  <div style="flex: 1"></div>
                  <div class="">万</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">商贷年限</div>
                  <div @click="showbusinessyears = true">
                    {{ businessyears }}
                  </div>
                  <div style="flex: 1"></div>
                  <div class="">年</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">利率方式</div>
                  <div @click="showlpr = true" class="">{{ LPRval }}</div>
                  <div style="flex: 1"></div>
                  <div class="">
                    <van-icon name="arrow" />
                  </div>
                </div>
                <div class="bottombox">
                  （LPR:贷款市场报价利率,自2019年10月起商贷开始使用LPR计算。LPR基准利率每月调整一次，实际贷款利率再PR基础上浮动）
                </div>
              </div>
              <div v-show="LPRval == '按LPR'" class="cell">
                <div class="topbox">
                  <div class="">基点&nbsp;&nbsp;</div>
                  <input type="number" v-model="basic" />
                  <div style="flex: 1"></div>
                  <div class="">BP(%..)</div>
                </div>
                <div class="bottombox">
                  (1个基点=0.01%,上浮10个基点=LPR*(1+0.1%))
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">综合商贷利率</div>
                  <div v-show="LPRval == '按LPR'" class="">
                    LPR(4.65%)+BP(0%..)=
                  </div>
                  <div style="flex: 1"></div>
                  <div class="">{{ businessrate }}%</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="组合贷款">
            <div class="showus">
              <div class="cell">
                <div class="topbox">
                  <div class="">房屋总价</div>
                  <input
                    type="number"
                    v-model="housemoney"
                    placeholder="请输入"
                  />
                  <div style="flex: 1"></div>
                  <div class="">万</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">首付比例</div>
                  <input
                    type="number"
                    v-model="firstpayproportion"
                    placeholder="请输入"
                  />
                  <div style="flex: 1"></div>
                  <div class="">%</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">公积金金额</div>
                  <input
                    v-model="publicmoney"
                    type="number"
                    placeholder="请输入"
                  />
                  <div style="flex: 1"></div>
                  <div class="">万</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">公积金年限</div>
                  <div @click="showpublicyears = true">{{ publicyears }}</div>
                  <div style="flex: 1"></div>
                  <div class="">年</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">公积金利率</div>
                  <div @click="showpublic = true" class="">
                    {{ Publicval }}
                  </div>
                  <div style="flex: 1"></div>
                  <div class=""><van-icon name="arrow" /></div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">商贷金额</div>
                  <input
                    v-model="businessmoney"
                    type="number"
                    placeholder="请输入"
                  />
                  <div style="flex: 1"></div>
                  <div class="">万</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">商贷年限</div>
                  <div @click="showbusinessyears = true">
                    {{ businessyears }}
                  </div>
                  <div style="flex: 1"></div>
                  <div class="">年</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">利率方式</div>
                  <div @click="showlpr = true" class="">{{ LPRval }}</div>
                  <div style="flex: 1"></div>
                  <div class="">
                    <van-icon name="arrow" />
                  </div>
                </div>
                <div class="bottombox">
                  （LPR:贷款市场报价利率,自2019年10月起商贷开始使用LPR计算。LPR基准利率每月调整一次，实际贷款利率再PR基础上浮动）
                </div>
              </div>
              <div v-show="LPRval == '按LPR'" class="cell">
                <div class="topbox">
                  <div class="">基点</div>
                  <input type="number" v-model="basic" />
                  <div style="flex: 1"></div>
                  <div class="">BP(%..)</div>
                </div>
                <div class="bottombox">
                  (1个基点=0.01%,上浮10个基点=LPR*(1+0.1%))
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">综合商贷利率</div>
                  <div v-show="LPRval == '按LPR'" class="">
                    LPR(4.65%)+BP(0%..)=
                  </div>
                  <div style="flex: 1"></div>
                  <div class="">{{ businessrate }}%</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="公积金贷款">
            <div class="showus">
              <div class="cell">
                <div class="topbox">
                  <div class="">房屋总价</div>
                  <input
                    type="number"
                    v-model="housemoney"
                    placeholder="请输入"
                  />
                  <div style="flex: 1"></div>
                  <div class="">万</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">首付比例</div>
                  <input
                    type="number"
                    v-model="firstpayproportion"
                    placeholder="请输入"
                  />
                  <div style="flex: 1"></div>
                  <div class="">%</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">公积金金额</div>
                  <div>{{ publicmoney }}</div>
                  <div style="flex: 1"></div>
                  <div class="">万</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">公积金年限</div>
                  <div @click="showpublicyears = true">{{ publicyears }}</div>
                  <div style="flex: 1"></div>
                  <div class="">年</div>
                </div>
              </div>
              <div class="cell">
                <div class="topbox">
                  <div class="">公积金利率</div>
                  <div @click="showpublic = true" class="">
                    {{ Publicval }}
                  </div>
                  <div style="flex: 1"></div>
                  <div class=""><van-icon name="arrow" /></div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="cut"></div>
    <div class="btnpart">
      <van-button @click="toresult">开始计算</van-button>
      <div class="safe"></div>
    </div>

    <van-popup
      v-model="showbusinessyears"
      position="bottom"
      :style="{ height: '35%' }"
    >
      <van-picker
        show-toolbar
        title="年限"
        visible-item-count="4"
        :columns="columnsbusinessyears"
        @confirm="onConfirmbusinessyears"
        @cancel="onCancelbusinessyears"
      />
    </van-popup>
    <van-popup
      v-model="showpublicyears"
      position="bottom"
      :style="{ height: '35%' }"
    >
      <van-picker
        show-toolbar
        title="年限"
        visible-item-count="4"
        :columns="columnspublicyears"
        @confirm="onConfirmpublicyears"
        @cancel="onCancelpublicyears"
      />
    </van-popup>
    <van-popup
      v-model="showpublic"
      position="bottom"
      :style="{ height: '35%' }"
    >
      <van-picker
        show-toolbar
        title="公积金利率"
        visible-item-count="4"
        :columns="columnspublic"
        @confirm="onConfirmpublic"
        @cancel="onCancelpublic"
      />
    </van-popup>
    <van-popup v-model="showlpr" position="bottom" :style="{ height: '35%' }">
      <van-picker
        show-toolbar
        title="年限"
        visible-item-count="4"
        :columns="columnslpr"
        @confirm="onConfirmlpr"
        @cancel="onCancellpr"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loan: true,
      active1: 0,
      active2: 0,
      housemoney: null,
      businessyears: 1,
      publicyears: 1,
      businessmoney: null,
      publicmoney: null,
      LPRval: "按LPR",
      Publicval: "3.25%(最新基准利率1倍)",
      basic: 0,
      firstpayproportion: null,
      businessrate: 4.65,
      publicrate: 3.25,
      showbusinessyears: false,
      showpublicyears: false,
      showlpr: false,
      showpublic: false,
      columnsbusinessyears: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
      ],
      columnspublicyears: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
      ],
      columnslpr: ["按LPR", "按旧版基准利率"],
      columnspublic: [
        "3.25%(最新基准利率1倍)",
        "3.58%(最新基准利率1.1倍)",
        "3.9%(最新基准利率1.2倍)",
        "4.23%(最新基准利率1.3倍)",
      ],
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    toresult() {
      if (this.loan && this.active1 == "0") {
        if (this.businessmoney == null || this.businessmoney == 0) {
          this.$toast("请输入商贷金额");
        } else {
          let obj = {};
          obj.loan = this.loan;
          obj.active1 = this.active1;
          obj.active2 = this.active2;
          obj.businessyears = this.businessyears;
          obj.businessmoney = this.businessmoney;
          obj.businessrate = this.businessrate;
          this.$router.push({
            path: "/buycomputeresult",
            query: { sendval: obj },
          });
        }
      } else if (this.loan && this.active1 == "1") {
        if (this.businessmoney == null || this.businessmoney == 0) {
          this.$toast("请输入商贷金额");
        } else if (this.publicmoney == null || this.publicmoney == 0) {
          this.$toast("请输入公积金金额");
        } else {
          let obj = {};
          obj.loan = this.loan;
          obj.active1 = this.active1;
          obj.active2 = this.active2;
          obj.businessyears = this.businessyears;
          obj.businessmoney = this.businessmoney;
          obj.businessrate = this.businessrate;
          obj.publicyears = this.publicyears;
          obj.publicmoney = this.publicmoney;
          obj.publicrate = this.publicrate;
          this.$router.push({
            path: "/buycomputeresult",
            query: { sendval: obj },
          });
        }
      } else if (this.loan && this.active1 == "2") {
        if (this.publicmoney == null || this.publicmoney == 0) {
          this.$toast("请输入公积金金额");
        } else {
          let obj = {};
          obj.loan = this.loan;
          obj.active1 = this.active1;
          obj.active2 = this.active2;
          obj.publicyears = this.publicyears;
          obj.publicmoney = this.publicmoney;
          obj.publicrate = this.publicrate;
          this.$router.push({
            path: "/buycomputeresult",
            query: { sendval: obj },
          });
        }
      } else if (!this.loan && this.active2 == "0") {
        if (this.housemoney == null || this.housemoney == 0) {
          this.$toast("请输入房屋总价");
        } else if (
          this.firstpayproportion == null ||
          this.firstpayproportion == 0
        ) {
          this.$toast("请输入首付比例");
        } else {
          let obj = {};
          obj.loan = this.loan;
          obj.active1 = this.active1;
          obj.active2 = this.active2;
          obj.housemoney = this.housemoney;
          obj.firstpayproportion = this.firstpayproportion;
          obj.businessyears = this.businessyears;
          obj.businessmoney = this.businessmoney;
          obj.businessrate = this.businessrate;
          this.$router.push({
            path: "/buycomputeresult",
            query: { sendval: obj },
          });
        }
      } else if (!this.loan && this.active2 == "1") {
        if (this.housemoney == null || this.housemoney == 0) {
          this.$toast("请输入房屋总价");
        } else if (
          this.firstpayproportion == null ||
          this.firstpayproportion == 0
        ) {
          this.$toast("请输入首付比例");
        } else if (this.businessmoney == null && this.publicmoney == null) {
          this.$toast("请输入公积金金额或商贷金额");
        } else {
          let obj = {};
          obj.loan = this.loan;
          obj.active1 = this.active1;
          obj.active2 = this.active2;
          obj.housemoney = this.housemoney;
          obj.firstpayproportion = this.firstpayproportion;
          obj.businessyears = this.businessyears;
          obj.businessmoney = this.businessmoney;
          obj.businessrate = this.businessrate;
          obj.publicyears = this.publicyears;
          obj.publicmoney = this.publicmoney;
          obj.publicrate = this.publicrate;
          this.$router.push({
            path: "/buycomputeresult",
            query: { sendval: obj },
          });
        }
      } else if (!this.loan && this.active2 == "2") {
        if (this.housemoney == null || this.housemoney == 0) {
          this.$toast("请输入房屋总价");
        } else if (
          this.firstpayproportion == null ||
          this.firstpayproportion == 0
        ) {
          this.$toast("请输入首付比例");
        } else {
          let obj = {};
          obj.loan = this.loan;
          obj.active1 = this.active1;
          obj.active2 = this.active2;
          obj.housemoney = this.housemoney;
          obj.firstpayproportion = this.firstpayproportion;
          obj.publicyears = this.publicyears;
          obj.publicmoney = this.publicmoney;
          obj.publicrate = this.publicrate;
          this.$router.push({
            path: "/buycomputeresult",
            query: { sendval: obj },
          });
        }
      }
    },
    onConfirmbusinessyears(value) {
      this.businessyears = value;
      this.showbusinessyears = false;
    },
    onCancelbusinessyears() {
      this.showbusinessyears = false;
    },
    onConfirmpublicyears(value) {
      this.publicyears = value;
      this.showpublicyears = false;
    },
    onCancelpublicyears() {
      this.showpublicyears = false;
    },
    onConfirmlpr(value) {
      this.LPRval = value;
      this.showlpr = false;
    },
    onCancellpr() {
      this.showlpr = false;
    },
    onConfirmpublic(value) {
      if (value == "3.25%(最新基准利率1倍)") {
        this.publicrate = 3.25;
      } else if (value == "3.58%(最新基准利率1.1倍)") {
        this.publicrate = 3.58;
      } else if (value == "3.9%(最新基准利率1.2倍)") {
        this.publicrate = 3.9;
      } else if (value == "4.23%(最新基准利率1.3倍)") {
        this.publicrate = 4.23;
      }
      this.Publicval = value;
      this.showpublic = false;
    },
    onCancelpublic() {
      this.showpublic = false;
    },
  },
  beforeUpdate() {
    if (this.LPRval == "按LPR") {
      this.businessrate = Number(this.basic) * 0.01 + 4.65;
    } else if (this.LPRval == "按旧版基准利率") {
      this.businessrate = 4.9;
    }
    if (!this.loan && this.active2 == 0) {
      if (
        this.housemoney &&
        this.firstpayproportion &&
        this.firstpayproportion < 99
      ) {
        this.businessmoney =
          this.housemoney * (100 - this.firstpayproportion) * 0.01;
      } else if (this.firstpayproportion > 99) {
        this.$toast("请输入正确的比例");
        this.firstpayproportion = null;
        this.businessmoney = null;
      } else {
        this.businessmoney = null;
      }
    }
    if (!this.loan && this.active2 == 2) {
      if (
        this.housemoney &&
        this.firstpayproportion &&
        this.firstpayproportion < 99
      ) {
        this.publicmoney =
          this.housemoney * (100 - this.firstpayproportion) * 0.01;
      } else if (this.firstpayproportion > 99) {
        this.$toast("请输入正确的比例");
        this.firstpayproportion = null;
        this.publicmoney = null;
      } else {
        this.publicmoney = null;
      }
    }
    if (!this.loan && this.active2 == 1) {
      if (this.firstpayproportion > 99) {
        this.$toast("请输入正确的比例");
        this.firstpayproportion = null;
        this.publicmoney = null;
        this.businessmoney = null;
      } else if (!this.housemoney || !this.firstpayproportion) {
        this.businessmoney = null;
        this.publicmoney = null;
      }
    }
  },
  watch: {
    businessmoney(newval) {
      if (!this.loan) {
        let a = this.housemoney * (100 - this.firstpayproportion) * 0.01;
        if (newval > a) {
          this.businessmoney = a;
        } else {
          this.publicmoney = a - newval;
        }
      }
    },
    publicmoney(newval) {
      if (!this.loan) {
        let a = this.housemoney * (100 - this.firstpayproportion) * 0.01;
        if (newval > a) {
          this.publicmoney = a;
        } else {
          this.businessmoney = a - newval;
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  background-color: #45b7cb;
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  color: #fff;
  .title {
    line-height: 25px;
    height: 25px;
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
  }
}
.space {
  height: 48px;
}
.depart {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #45b7cb;
  color: #fff;

  .box {
    display: flex;
  }
  > div {
    font-size: 18px;

    div {
      margin: 0 15px;
      padding-bottom: 5px;
      font-size: 16px;
      font-weight: normal;
    }

    .active {
      font-weight: bold;
      border-bottom: 2px solid #fff;
    }
  }
}
.showtitle {
  padding-top: 20px;
  background-color: #45b7cb;

  .showus {
    margin-top: 20px;
    background-color: #fff;
    padding: 0 15px;

    .cell {
      padding: 20px 0;
      border-bottom: 1px solid #f1f1f1;

      .topbox {
        display: flex;
        justify-content: space-between;
        align-items: center;

        input {
          font-size: 14px;
          width: 170px;
          color: #333;
          border: none;
          height: 20px;
          padding: 0;
        }
        div {
          &:first-child {
            font-weight: bold;
            font-size: 17px;
            width: 105px !important;
          }

          &:nth-child(2) {
            font-size: 14px;
            width: 170px;
            color: #333;
            margin-left: 10px;
          }

          &:last-child {
            font-size: 15px;
            text-align: right;
            color: #333;
          }
        }
      }

      .bottombox {
        font-size: 13px;
        color: #999;
        padding: 5px 0 0 25px;
      }
    }
  }
}
.btnpart {
  position: fixed;
  bottom: 0px;
  width: 100%;
  text-align: center;
  background-color: #fff;
  padding: 10px 0;
  z-index: 2000;
  .van-button {
    display: inline-block;
    width: 90%;
    font-size: 16px;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
    border-radius: 20px;
    border: none;
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.cut {
  height: 100px;
}
</style>
